<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath%>">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <layui-ali th:replace="common/common_css :: commonCss"></layui-ali>
    <style>
    </style>
</head>

<body>
<div class="layui-container" style="margin-top:10px;">
    <div class="layui-row">
        <div class="layui-col-md1" style="height:1px;">
            <div class="grid-demo"></div>
        </div>
        <div class="layui-col-xs10" style="height:700px;box-shadow: 0px 1px 3px rgba(130, 85, 80, 0.5);">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">
                            <i class="layui-icon layui-icon-dialogue" style="font-size: 20px;"></i>&nbsp;好友
                        </li>
                        <li>
                            <i class="iconfont" style="font-size: 20px;">&#xe6f8;</i> 群
                        </li>
                        <li>
                            <i class="layui-icon layui-icon-mike" style="font-size: 20px;"></i>&nbsp;语音
                        </li>
                        <li>
                            <i class="layui-icon layui-icon-mike" style="font-size: 20px;"></i>&nbsp;加好友
                        </li>
                    </ul>
                    <div class="layui-tab-content" style="padding:0px;">
                        <div class="layui-tab-item layui-show" id="vuechat">
                            <div style="width: 100%;">
                                <div class="alluser" onmouseover="leftscroll(1)" onmouseleave="leftscroll(2)"
                                     id="leftscroll">
                                    <form>
                                        <div class="layui-input-block functional-area-icon" style="margin: 0;">
                                            <input type="text" name="Number" placeholder="请输入好友号查询"
                                                   autocomplete="off" class="layui-input">
                                            <button type="button" class="layui-btn layui-btn-sm">
                                                <i class="layui-icon">&#xe615;</i>
                                            </button>
                                        </div>
                                    </form>
                                    <div id="appLoading">
                                        <div class="spinner">
                                            <div class="rect1"></div>
                                            <div class="rect2"></div>
                                            <div class="rect3"></div>
                                            <div class="rect4"></div>
                                            <div class="rect5"></div>
                                        </div>
                                    </div>
                                    <ol id="leftc" style="display: none;">
                                        <li v-for="(item,index) in listnickname" :key="index"
                                            @click="selectStyle (item,item.userid)"
                                            :class="{'active':item.active,'unactive':!item.active,'leftnickename':true}">
                                            <p>
                                                <img :src=item.uimg style="border-radius:50%;height:60px;">
                                                <span :class="{'layui-badge-dot':item.newnote,'':!item.newnote,'newnoteid':true}"></span>
                                                {{item.nickname}}
                                            </p>
                                        </li>
                                    </ol>
                                </div>
                                <div style="width:84%;float: left;height:626px;">
                                    <div id="appLoading2" style="display: none;">
                                        <div class="spinner">
                                            <div class="rect1"></div>
                                            <div class="rect2"></div>
                                            <div class="rect3"></div>
                                            <div class="rect4"></div>
                                            <div class="rect5"></div>
                                        </div>
                                    </div>
                                    <div id="waits" style="text-align: center;margin-top:250px">
                                        <h1>打开世界的另一扇窗</h1>
                                        <span>主动一点，世界会更大。</span>
                                    </div>
                                    <div id="words" style="display: none">
                                        <div class="talk_show talkimg" id="msgcontent" onmouseover="leftscroll(3)"
                                             onmouseleave="leftscroll(4)">
                                            <div v-for="(msg,index) in listmessage" :key="index">
                                                <div v-if="msg.senduserid === loginusername">
                                                    <div class="rtalk" :id="index" @click="openimg(index)">
                                                        <span v-html="msg.sendtext"></span>
                                                    </div>
                                                </div>
                                                <div v-if="msg.senduserid != loginusername">
                                                    <div class="ltalk" :id="index" @click="openimg(index)">
                                                        <span v-html="msg.sendtext"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="msg_end" style="height:0px; overflow:hidden"></div>
                                        </div>
                                        <div style="background-color:white;height:200px;">
                                            <div class="layui-form-item layui-form-text" style="margin:0 auto;">
                                                <div class="layui-input-block" style="margin: 0 auto;">
                                                    <textarea class="layui-textarea layui-hide" name="content"
                                                              lay-verify="content" id="LAY_demo_editor"></textarea>
                                                </div>
                                            </div>
                                            <button class="layui-btn layui-btn-sm" data-type="reload"
                                                    style="float: right;position: relative;" onclick="sendNormalMsg()">
                                                发送
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="groupChat">
                            <div style="width: 100%;">
                                <div class="alluser" onmouseover="leftscroll(1)" onmouseleave="leftscroll(2)"
                                     id="leftscroll_group">
                                    <form class="layui-form">
                                        <div class="layui-input-block functional-area-icon" style="margin: 0;">
                                            <input type="text" name="groupNumber" placeholder="请输入群号查询"
                                                   autocomplete="off" class="layui-input" id="groupNumber">
                                        </div>
                                        <div class="layui-btn-group functional-area-icon">
                                            <button type="button" class="layui-btn layui-btn-sm"
                                                    lay-submit lay-filter="queryGroup">
                                                <i class="layui-icon">&#xe615;</i>
                                            </button>
                                            <button type="button" class="layui-btn layui-btn-sm"
                                                    lay-submit lay-filter="addGroup">
                                                <i class="layui-icon">&#xe654;</i>
                                            </button>
                                        </div>
                                    </form>
                                    <div id="appLoading_group">
                                        <div class="spinner">
                                            <div class="rect1"></div>
                                            <div class="rect2"></div>
                                            <div class="rect3"></div>
                                            <div class="rect4"></div>
                                            <div class="rect5"></div>
                                        </div>
                                    </div>
                                    <ol id="leftc_group" style="display: none;">
                                        <li v-for="(item,index) in listnickname" :key="index"
                                            @click="selectStyle (item,item.id)"
                                            :class="{'active':item.active,'unactive':!item.active,'leftnickename':true}">
                                            <p>
<!--                                                <img :src=item.uimg style="border-radius:50%;height:60px;">-->
                                                <img style="border-radius:50%;height:60px;">
                                                <span :class="{'layui-badge-dot':item.newnote,'':!item.newnote,'newnoteid':true}"></span>
                                                {{item.groupName}}
                                            </p>
                                        </li>
                                    </ol>
                                </div>
                                <div style="width:84%;float: left;height:626px;">
                                    <div id="appLoading2_group" style="display: none;">
                                        <div class="spinner">
                                            <div class="rect1"></div>
                                            <div class="rect2"></div>
                                            <div class="rect3"></div>
                                            <div class="rect4"></div>
                                            <div class="rect5"></div>
                                        </div>
                                    </div>
                                    <div id="waits_group" style="text-align: center;margin-top:250px">
                                        <h1>打开世界的另一扇窗</h1>
                                        <span>主动一点，世界会更大。</span>
                                    </div>
                                    <div id="words_group" style="display: none">
                                        <div class="talk_show talkimg" id="msgcontent_group" onmouseover="leftscroll(3)"
                                             onmouseleave="leftscroll(4)" data-group-id="">
                                            <div v-for="(msg,index) in listmessage" :key="index">
                                                <div v-if="msg.senduserid === loginusername">
                                                    <div class="rtalk" :id="index" @click="openimg(index)">
                                                        <span v-html="msg.sendtext"></span>
                                                    </div>
                                                </div>
                                                <div v-if="msg.senduserid != loginusername">
                                                    <div class="ltalk" :id="index" @click="openimg(index)">
                                                        <span v-html="msg.sendtext"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="msg_end_group" style="height:0px; overflow:hidden"></div>
                                        </div>
                                        <div style="background-color:white;height:200px;">
                                            <div class="layui-form-item layui-form-text" style="margin:0 auto;">
                                                <div class="layui-input-block" style="margin: 0 auto;">
                                                    <textarea class="layui-textarea layui-hide" name="content"
                                                              lay-verify="content"
                                                              id="LAY_demo_editor_group"></textarea>
                                                </div>
                                            </div>
                                            <button class="layui-btn layui-btn-sm" data-type="reload"
                                                    style="float: right;position: relative;" onclick="sendGroupMsg()">发送
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div style="margin-top:15px">
                                <audio style="display: none" controls class="audio-player"></audio>
                                <button class="layui-btn layui-btn-sm record-btn layui-btn-radius">开始录音</button>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="">
                            <form class="layui-form" action="" style="margin-top:10px;">
                                <div class="layui-form-item" style="margin-right:40px">
                                    <label class="layui-form-label">账号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" autocomplete="off" placeholder="请输入账号"
                                               lay-verify="required" lay-reqtext="账号是必填项，岂能为空？" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit=""
                                                lay-filter="lookuser">查询
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <div style="display:none;" id="userinfo">
                                <div class="single-member effect-1">
                                    <div>
                                        <img :src="userinfo.uimg" style="width:100px" alt="Member" class="layui-circle">
                                    </div>
                                    <div class="member-info">
                                        <h3>{{userinfo.nickname}}</h3>
                                        <p>{{userinfo.usign}}</p>
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                                                @click="adduser(userinfo.userid)">加好友
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md1" style="height:1px;">
            <div class="grid-demo"></div>
        </div>
    </div>
</div>
</body>
<div style="display:none;" id="groupInfo">
    <div class="single-member effect-1">
        <div>
            <img :src="groupInfo.uimg" style="width:100px" alt="Member" class="layui-circle">
        </div>
        <div class="member-info">
            <h3>{{groupInfo.groupName}}</h3>
            <p>{{groupInfo.introduce}}</p>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                    onclick="joinGroup(this)" :data-group-id="groupInfo.id">加群
            </button>
        </div>
    </div>
</div>
<layui-vue th:replace="common/common_js :: commonJs"></layui-vue>
<script type="application/javascript" th:src="@{/static/chat/js/chat.js}"></script>
</html>